<template>
	<view class="content">
		<view class="navigate layout-flex-base" :style="{ height: NavBarHeight + 'px', 'line-height': NavBarHeight + 'px', 'padding-top': statusBarHeight + 'px' }">
			<div class="c">应用中心</div>
		</view>
		<image src="../../static/process-flow/newsqbg_01.jpg" mode="widthFix" class="bg"></image>
		<view class="main_box">
			<view class="item" v-for="item in applyList" :key="item.id" @click="review(item.formKey, item.flowId, item.title)">
				<image src="../../static/process-flow/meetinginfo_11.png" mode="widthFix" class="image"></image>
				<view>
					<text class="f">{{ item.title }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { autoLogin, flowList } from "@/uni/uni.js"
import mixin from "@/mixin"
export default {
	mixins: [mixin],
	data() {
		return {
			// pathVariables: {},
			applyList: [],
			page: {
				current: 1,
				size: 10,
				total: 0,
			},
		}
	},
	// onLoad(pathVariables) {
	// 	this.pathVariables = pathVariables

	// 	if (this.pathVariables.code) {
	// 		autoLogin({
	// 			code: this.pathVariables.code,
	// 		})
	// 			.then(res => {
	// 				uni.setStorageSync("token", res.token)
	// 				uni.setStorageSync("refreshToken", res.refreshToken)
	// 			})
	// 			.catch(error => {
	// 				uni.removeStorageSync("token")
	// 				uni.showToast({
	// 					title: "登录过期,请返回重试",
	// 					icon: "error",
	// 					duration: 2000,
	// 				})
	// 				setTimeout(function () {
	// 					uni.navigateTo({
	// 						url: "/pages/error/404?code=10007",
	// 					})
	// 				}, 500)
	// 			})
	// 	}
	// },
	onLoad() {
		this.applyList = []
		this.getFlowList()
	},
	onShow() {
		// if (uni.getStorageSync("token") == null || uni.getStorageSync("token") == '') {
		// 	autoLogin({
		// 		code: this.pathVariables.code
		// 	}).then(res => {
		// 		uni.setStorageSync('token', res.token);
		// 		uni.setStorageSync('refreshToken', res.refreshToken);
		// 	}).catch(error => {
		// 		uni.removeStorageSync('token')
		// 		uni.showToast({
		// 			title: "您不是公职人员，暂无访问权限!",
		// 			icon: "error",
		// 			duration: 2000,
		// 		})
		// 		setTimeout(function () {
		// 			uni.navigateTo({
		// 				url: '/pages/error/404'
		// 			})
		// 		}, 2000)
		// 	})
		// }
	},
	onReachBottom() {
		if (this.applyList.length < this.page.total) {
			this.page.current++
			this.getFlowList()
		}
	},
	onPullDownRefresh() {
		this.onSearch()
		uni.stopPullDownRefresh()
	},
	methods: {
		async getFlowList() {
			const { records, total: pageTotal } = await flowList({
				status: 1,
				current: this.page.current,
				size: this.page.size,
			})
			this.applyList = this.applyList.concat(records)
			this.page.total = pageTotal
			// flowList({
			// 	status: 1,
			// 	current: this.page.current,
			// 	size: this.page.size,
			// }).then(({ records, total: pageTotal }) => {
			// 	this.applyList = this.applyList.concat(records)
			// 	this.page.total = pageTotal
			// })
		},
		review(formKey, flowId, title) {
			this.toPage(`/pages/flow/form?id=${formKey}&fid=${flowId}&title=${title}`)
		},
		onSearch() {
			this.page.current = 1
			this.applyList = []
			this.getFlowList()
		},
		link(url) {
			uni.navigateTo({
				url,
			})
		},
		links(url) {
			uni.switchTab({
				url,
			})
		},
	},
}
</script>

<style lang="scss">
.footesr {
	width: 100%;
	height: 120rpx;
	background-color: #fff;
	border-top: 1px solid #f7f7f7;
	display: flex;
	align-items: center;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 2;

	view {
		width: 33.33%;
		height: 100%;
		padding-top: 12rpx;

		&.on {
			text {
				color: #4876ff;
			}
		}

		image {
			width: 60rpx;
			display: block;
			margin: 0 auto;
			margin-bottom: 2rpx;
		}

		text {
			display: block;
			font-size: 20rpx;
			color: #666666;
			text-align: center;
		}
	}
}

.content {
	overflow: hidden;
	width: 100%;
	padding-bottom: 30rpx;
	position: relative;
	min-height: 100vh;
	.navigate {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		// background: #fff;
		box-sizing: border-box;
		z-index: 999;
		.l {
			width: 100rpx;
			height: 100%;
			image {
				width: 15rpx;
				position: absolute;
				left: 20rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		.c {
			flex: 1;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
		}
		.r {
			width: 100rpx;
			height: 100%;
			span {
				padding: 6rpx 15rpx;
				color: #fff;
				font-size: 26rpx;
				background: $theme-color;
				border-radius: 40rpx;
			}
		}
	}

	.bg {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}

	.main_box {
		margin-top: 50rpx;
		width: 100%;
		position: relative;
		padding: 50rpx 35rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			width: 47%;
			margin-bottom: 27rpx;
			background: linear-gradient(to right, #f0f6ff, #d8e8fc);
			border-radius: 5px;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 25rpx 20rpx;

			&:nth-child(2n) {
				background: linear-gradient(to right, #fff7eb, #feefd7);
			}
			&:nth-child(3n) {
				background: linear-gradient(to right, #fff7eb, #d7feec);
			}
			.image {
				width: 55rpx;
				margin-right: 16rpx;
			}

			view {
				overflow: hidden;

				.f {
					font-size: 31rpx;
					color: #111111;
					font-weight: bold;
					letter-spacing: 1rpx;
				}

				.des {
					display: block;
					font-size: 29rpx;
					color: #666666;
					letter-spacing: 1rpx;
				}
			}
		}
	}
}
</style>
